<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/search.css" media="all" />
</head>

<body class="white">
	<div class="mui-content" id="vueMain">
		<ul class="mui-table-view sel-list" style="border-top: 10px solid #EBEBEB;margin-top: 0px;">
			<template v-for="item in list">
				<li class="mui-table-view-cell mui-checkbox mui-right">
					<input name="city" type="checkbox" v-bind:checked="check(item)" />{{item}}
				</li>
			</template>
	        
	    </ul>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views;
	mui.init({
		beforeback:function(){
			var checkbox = document.querySelectorAll('.mui-checkbox');
			var vals = [];
			mui.each(checkbox, function(){
				var input = this.querySelector('input');
				if( input.checked ){
					vals.push(this.innerText.trim());
				}
			})
			if( vals.length !=0){
				mui.fire(bexta.getWebview().opener(), 'setVal', {
					aid:views.aid,
					val:vals
				});
			}
			return true;
		}
	});
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    apps = new Vue({
	    		el:"#vueMain",
	    		data:{
	    			list:views.val,
	    			def:views.def
	    		},
	    		methods:{
	    			check:function(v){
	    				if( bexta.inArray(this.def, v) ){
	    					return true;
	    				}
	    				return false;
	    			}
	    		},
	    		mounted:function(){
	    			mui('.mui-table-view').on('tap', '.mui-checkbox', function(evt){
	    			})
	    		}
	    });
	    
	    
	    
	})
</script>
</body>
</html>